<template>
  <div class="mobile-login-container">
    <div class="login-content">
      <div class="login-header">
        <div class="logo-container">
          <img :src="require('../../../assets/images/Logo.png')" alt="Logo" class="logo">
        </div>
      </div>

      <!-- 登录表单 -->
      <div class="login-form">
        <!-- 密码登录表单 -->
        <div v-if="loginType === 'password'">
          <!-- 用户名输入 -->
          <div class="form-group">
            <div class="input-with-icon">
              <Icon icon="ep:user" class="input-icon"/>
              <input
                type="text"
                v-model="username"
                placeholder="请输入用户名"
                class="form-input"
              >
            </div>
          </div>

          <!-- 密码输入 -->
          <div class="form-group">
            <div class="input-with-icon">
              <i class="el-icon-lock input-icon"></i>
              <input
                :type="showPassword ? 'text' : 'password'"
                v-model="password"
                placeholder="请输入密码"
                class="form-input"
              >
              <span class="password-toggle" @click="showPassword = !showPassword">
               <Icon :icon="showPassword ? 'ep:view' : 'ep:hide'" class="toggle-icon" />
              </span>
            </div>
          </div>
        </div>

        <!-- 短信登录表单 -->
        <div v-else>
          <!-- 手机号输入 -->
          <div class="form-group">
            <div class="input-with-icon">
              <Icon icon="ep:iphone" class="input-icon" />
              <input
                type="tel"
                v-model="phone"
                placeholder="请输入手机号"
                class="form-input"
                maxlength="11"
              >
            </div>
          </div>

          <!-- 验证码输入 -->
          <div class="form-group">
            <div class="input-with-icon">
              <Icon icon="ep:message" class="input-icon" />
              <input
                type="text"
                v-model="code"
                placeholder="请输入验证码"
                class="form-input code-input"
                maxlength="6"
              >
              <el-button
                class="code-btn"
                type="text"
                :class="{ disabled: countdown > 0 }"
                :disabled="countdown > 0"
                @click="sendCode"
              >
                {{ countdown > 0 ? `${countdown}s` : '获取验证码' }}
              </el-button>
            </div>
          </div>
        </div>

        <!-- 登录按钮 -->
        <button class="login-btn" @click="handleLogin">
          登录
        </button>

        <!-- 切换登录方式 -->
        <div class="login-switch">
          <span v-if="loginType === 'password'" @click="switchToSMSLogin">
            短信验证码登录
          </span>
          <span v-else @click="switchToPasswordLogin">
            账号密码登录
          </span>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import { Icon } from '@iconify/vue2'

export default {
  name: 'MobileLogin',
  components: {
    Icon
  },
  data() {
    return {
      username: '',
      password: '',
      phone: '',
      code: '',
      showPassword: false,
      loginType: 'password', // 'password' 或 'sms'
      countdown: 0
    }
  },
  methods: {
    handleLogin() {
      if (this.loginType === 'password') {
        if (!this.username) {
          alert('请输入用户名')
          return
        }
        if (!this.password) {
          alert('请输入密码')
          return
        }
      } else {
        if (!this.phone) {
          alert('请输入手机号')
          return
        }
        if (!this.code) {
          alert('请输入验证码')
          return
        }
      }
      alert('登录成功！')
      this.$router.push('/userdistribution/home')
    },

    switchToSMSLogin() {
      this.loginType = 'sms'
      this.username = ''
      this.password = ''
    },

    switchToPasswordLogin() {
      this.loginType = 'password'
      this.phone = ''
      this.code = ''
    },

    sendCode() {
      if (!this.phone) {
        alert('请输入手机号')
        return
      }

      this.countdown = 60
      const timer = setInterval(() => {
        this.countdown--
        if (this.countdown <= 0) {
          clearInterval(timer)
        }
      }, 1000)

      alert('验证码已发送')
    }
  }
}
</script>

<style scoped>
.mobile-login-container {
  width: 100%;
  min-height: 100vh;
  background: #000;
  display: flex;
  justify-content: flex-start;
  align-items: flex-start;
  padding: 20px;
}

.login-header {
  padding: 60px 30px 20px;
  text-align: center;
}

.logo-container {
  display: inline-block;
  padding: 10px;
}

.logo {
  width: 80px;
  height: 80px;
  border-radius: 12px;
}

.login-content {
  width: 375px;
  min-height: 667px;
  background: white;
  border-radius: 20px;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.5);
  overflow: hidden;
  position: relative;
}

.login-form {
  padding: 40px 30px 0;
}

.form-group {
  margin-bottom: 25px;
}

.input-with-icon {
  position: relative;
  display: flex;
  align-items: center;
}

.input-icon {
  position: absolute;
  left: 15px;
  color: #666;
  z-index: 1;
  font-size: 18px;
}

.form-input {
  width: 100%;
  padding: 15px 15px 15px 45px;
  border: 1px solid #333;
  border-radius: 8px;
  font-size: 16px;
  background: white;
  color: black;
  transition: all 0.3s ease;
}

.form-input:focus {
  outline: none;
  border-color: #667eea;
}

.form-input::placeholder {
  color: #666;
}

.password-toggle {
  position: absolute;
  right: 15px;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 4px;
}

.toggle-icon {
  font-size: 16px;
  color: #666;
  transition: all 0.3s ease;
}

.password-toggle:hover .toggle-icon {
  color: #667eea;
}

.login-btn {
  width: 100%;
  padding: 15px;
  background: #667eea;
  color: white;
  border: none;
  border-radius: 30px;
  font-size: 16px;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.3s ease;
  margin-top: 30px;
}

.login-btn:hover {
  background: #5a6fd8;
}

.login-switch {
  text-align: left;
  margin-top: 20px;
}

.login-switch span {
  color: #667eea;
  cursor: pointer;
  font-size: 14px;
  transition: all 0.3s ease;
}

.login-switch span:hover {
  text-decoration: underline;
}

.code-input {
  padding-right: 100px;
}

.code-btn {
  position: absolute;
  right: 5px;
  padding: 6px 12px;
  //background: #667eea;
  color: #667eea;
  border: none;
  border-radius: 6px;
  cursor: pointer;
  font-size: 12px;
  transition: all 0.3s ease;
  min-width: 80px;
}

.code-btn:hover:not(.disabled) {
  color: #5a6fd8;
}

.code-btn.disabled {
  color: #5a6fd8;
  cursor: not-allowed;
}

@media (max-width: 375px) {
  .mobile-login-container {
    padding: 0;
  }

  .login-content {
    width: 100%;
    min-height: 100vh;
    border-radius: 0;
  }
}
</style>
